|
1
|
|
|
import { |
|
2
|
|
|
Padding, |
|
3
|
|
|
Margin, |
|
4
|
|
|
Border, |
|
5
|
|
|
BoxShadow, |
|
6
|
|
|
BorderRadius |
|
7
|
|
|
} from '../../controls'; |
|
8
|
|
|
|
|
9
|
|
|
import { Preview } from '../preview'; |
|
10
|
|
|
|
|
11
|
|
|
export class Demo { |
|
12
|
|
|
|
|
13
|
|
|
constructor( saveUI ) { |
|
14
|
|
|
this.$head = $( 'head' ); |
|
15
|
|
|
this.save = saveUI; |
|
16
|
|
|
|
|
17
|
|
|
this.controls = [ |
|
18
|
|
|
{ name: 'margin', className: Margin }, |
|
19
|
|
|
{ name: 'padding', className: Padding }, |
|
20
|
|
|
{ name: 'border', className: Border }, |
|
21
|
|
|
{ name: 'boxShadow', className: BoxShadow }, |
|
22
|
|
|
{ name: 'borderRadius', className: BorderRadius } |
|
23
|
|
|
]; |
|
24
|
|
|
|
|
25
|
|
|
this.preview = new Preview(); |
|
26
|
|
|
} |
|
27
|
|
|
|
|
28
|
|
|
/** |
|
29
|
|
|
* Get the value of a saved configuration. |
|
30
|
|
|
* |
|
31
|
|
|
* @since 1.0.0 |
|
32
|
|
|
* |
|
33
|
|
|
* @param {string} controlName Control Type. |
|
34
|
|
|
* @return {object} Config to pass into control. |
|
35
|
|
|
*/ |
|
36
|
|
|
getSavedConfigs( controlName ) { |
|
37
|
|
|
let storage = this.save.getItem( controlName ), |
|
38
|
|
|
$defaultTarget = $( '.directional-controls .combined' ), |
|
39
|
|
|
config = { target: $defaultTarget }; |
|
|
|
|
|
|
40
|
|
|
|
|
41
|
|
|
config = { |
|
42
|
|
|
defaults: storage, |
|
43
|
|
|
|
|
44
|
|
|
/* |
|
45
|
|
|
Temporary Example for overriding Defaults. |
|
46
|
|
|
setting: { |
|
47
|
|
|
css: '', |
|
48
|
|
|
settings: [ |
|
49
|
|
|
{ |
|
50
|
|
|
media: [ 'desktop' ], |
|
51
|
|
|
unit: 'em', |
|
52
|
|
|
isLinked: true, |
|
53
|
|
|
values: { |
|
54
|
|
|
top: 10, |
|
55
|
|
|
right: 10, |
|
56
|
|
|
bottom: 10, |
|
57
|
|
|
left: 10 |
|
58
|
|
|
} |
|
59
|
|
|
} |
|
60
|
|
|
] |
|
61
|
|
|
}, |
|
62
|
|
|
*/ |
|
63
|
|
|
|
|
64
|
|
|
control: { |
|
65
|
|
|
selectors: [ '.bg-tabs-content.directional-controls .combined.test-case' ] |
|
66
|
|
|
} |
|
67
|
|
|
}; |
|
68
|
|
|
|
|
69
|
|
|
if ( storage ) { |
|
70
|
|
|
this.preview.appendStyles( controlName, storage.css ); |
|
71
|
|
|
} |
|
72
|
|
|
|
|
73
|
|
|
return config; |
|
74
|
|
|
} |
|
75
|
|
|
|
|
76
|
|
|
/** |
|
77
|
|
|
* Render all the controls. |
|
78
|
|
|
* |
|
79
|
|
|
* @since 1.0.0 |
|
80
|
|
|
*/ |
|
81
|
|
|
render() { |
|
82
|
|
|
let $tab = $( '.directional-controls' ), |
|
83
|
|
|
$combined = $tab.find( '.combined' ); |
|
|
|
|
|
|
84
|
|
|
|
|
85
|
|
|
for ( let control of this.controls ) { |
|
86
|
|
|
const name = control.name; |
|
87
|
|
|
|
|
88
|
|
|
this.save.setup( name, ( name ) => this[ name ].settings ); |
|
89
|
|
|
|
|
90
|
|
|
this[ name ] = new control.className( this.getSavedConfigs( name ) ); |
|
91
|
|
|
|
|
92
|
|
|
this[ name ].events.on( 'change', ( e ) => { |
|
93
|
|
|
this.preview.appendStyles( name, e.css ); |
|
94
|
|
|
} ); |
|
95
|
|
|
|
|
96
|
|
|
$tab.find( '.' + name + '-control .control' ).html( this[ name ].render() ); |
|
97
|
|
|
} |
|
98
|
|
|
} |
|
99
|
|
|
|
|
100
|
|
|
} |
|
101
|
|
|
|
BoldGrid /
controls
Loading history...